<template>
  <div class="goods">
    <!-- 店铺信息 -->
    <header>
      <div class="shop-bgc"></div>
      <div class="shop-wrap">
        <div class="shop-info">
          <img src="~@/assets/images/logo.png" />
          <div class="text-info">
            <h3 class="fis-title">
              <span>品牌</span> &emsp;{{ shopInfo.name }}
            </h3>
            <p class="sec-title">
              {{ shopInfo.description }} / {{ shopInfo.deliveryTime }}分钟送达
            </p>
            <div class="thr-title">
              <p v-for="(item, index) in shopInfo.supports" :key="index">
                <span>减</span> &emsp;{{ item }}
              </p>
            </div>
          </div>
        </div>
        <div class="shop-notice" @click="show = true">
          <!-- <span>公告</span> {{shopInfo.bulletin}} -->
          <van-notice-bar
            color="#fff"
            background="rgba(0, 0, 0, 0.4)"
            left-icon="volume-o"
            :text="shopInfo.bulletin"
          />
        </div>
        <!-- 模态框 -->
        <van-overlay :show="show" @click="show = false">
          <div class="wrapper" @click.stop></div>
          <div class="block">
            <h3>{{shopInfo.name}}</h3>
            <van-rate
              v-model="shopInfo.score"
              allow-half
              :size="16"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <div class="prefer">
              <p></p>
              <h4>优惠信息</h4>
              <p></p>
            </div>
            <div class="activity">
              <p v-for="(item, index) in shopInfo.supports" :key="index">
                <van-tag color="#fff" text-color="blue">惠</van-tag>
                {{item}}
              </p>
            </div>
            <div class="prefer">
              <p></p>
              <h4>商家公告</h4>
              <p></p>
            </div>
            <!-- 公告内容 -->
            <p class="modal-notice">
              {{shopInfo.bulletin}}
            </p>
            <van-icon size="20" name="cross" />
          </div>
        </van-overlay>
      </div>
    </header>
    <!-- 店铺商品 -->
    <main class="goods-wrap">
      <!-- 内容导航 -->
      <van-tabs>
        <!-- 商品 -->
        <van-tab title="商品">
          <!-- 侧边导航 -->
          <div class="menu-list">
            <van-sidebar v-model="activeKey" @change="onChange">
              <van-sidebar-item
                v-for="(item, index) in menuList"
                :key="index"
                :title="item"
                @click="connFoods"
                :id="`menu_${index}`"
              />
            </van-sidebar>
          </div>
          <!-- 右边内容 -->
          <div class="right-info">
            <div class="goods-scroll">
              <div
                class="goods-panel"
                v-for="(item, index) in newAllGoods"
                :key="index"
                :id="`panel_${index}`"
              >
                <h3 class="goods-type" :id="`foods_${index}`">
                  {{ item.name }}
                </h3>
                <div
                  class="goods-dsc"
                  v-for="(_item, _index) in item.foods"
                  :key="_index"
                >
                  <div class="single-goods" @click="jumpDetail(_item.id)">
                    <div class="goods-cover">
                      <img :src="_item.imgUrl" />
                    </div>
                    <div class="goods-detail">
                      <h3 class="goods-title">{{ _item.name }}</h3>
                      <p class="goods-con">{{ _item.goodsDesc }}</p>
                      <p class="sell-count">
                        月售{{ _item.sellCount }}份，好评率{{ _item.rating }}%
                      </p>
                      <p class="goods-price">￥{{ _item.price }}</p>
                    </div>
                  </div>
                  <!-- 图标 -->
                  <div class="single-icon">
                    <van-icon
                      name="minus"
                      size="14"
                      @click="reduce(_item.id)"
                    />
                    <span>{{ _item.goodsCount }}</span>
                    <van-icon name="plus" size="14" @click="add(_item.id)" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="评价">
          <Assess></Assess>
        </van-tab>
        <van-tab title="商家">
          <Shop></Shop>
        </van-tab>
      </van-tabs>
    </main>
    <!-- 尾部 -->
    <footer class="footer">
      <!-- 左边 -->
      <div class="foo-left">
        <div class="out-circle">
          <div class="in-circle" @click="showPopup">
            <van-icon name="shopping-cart" color="#b5b9c4" size="26" />
          </div>
          <!-- 微标 -->
          <van-badge :content="miniIcon" />
        </div>
        <p class="tip">{{priceTip}}</p>
      </div>
      <!-- 右边 -->
      <div class="foo-right">{{payTip}}</div>
    </footer>
    <!-- 购物车弹出框 -->
    <van-popup v-model="showbtm" position="bottom" :style="{ height: '30%' }">
      <div class="cart-top">
        <span>已选商品</span>
        <span @click="emptyChoosed">清空</span>
      </div>
      
      <div class="add-goods" v-for="(item, index) in choosedGoods" :key="index">
        <h3>{{ item.name }}</h3>
        <span>￥{{ item.price }}</span>
        <van-stepper
          v-model="item.goodsCount"
          theme="round"
          button-size="18"
          disable-input
          min="0"
          step
          async-change
          @plus="add(item.id)"
          @minus="reduce(item.id)"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getGoodsList_api, getSeller_api } from "@/apis/index";
import Shop from "@/pages/Index/Children/Shop";
import Assess from "@/pages/Index/Children/Assess";
import BScroll from "@better-scroll/core";
import { mapState, mapMutations, mapGetters } from "vuex";

export default {
  components: {
    Shop,
    Assess,
  },
  data() {
    return {
      payTip: '￥20起送',
      priceTip: '未选购商品',
      miniIcon: 0, // 微标数量
      menuScroll: null,
      goodsScroll: null,
      value: 1, // 购物车商品数量
      showbtm: false, // 底部购物车弹出框显示状态
      show: false, // 模态框显示状态
      activeKey: 0, // 侧边导航激活项
      menuList: [], // 侧边导航内容
    };
  },
  methods: {
    // 侧边导航切换
    onChange() {},
    // 左侧菜单点击事件
    connFoods(index) {
      // console.log(document.querySelector(`#foods_${index}`));
      this.goodsScroll.scrollToElement(`#foods_${index}`, 400);
    },
    // 单个商品的数量 减
    reduce(id) {
      this.updateGoodsCount({ id, type: "reduce" });
      this.calcSmallIcon();
    },
    // 单个商品的数量 加
    add(id) {
      this.updateGoodsCount({ id, type: "add" });
      this.calcSmallIcon();
      if(this.choosedGoods.length > 0) {
        this.totalPrcie();
        this.payTip = '去结算';
      }
    },
    // 点击单个商品跳转至详情页
    jumpDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      });
    },
    // 底部购物车
    showPopup() {
      this.showbtm = !this.showbtm;
    },
    // 计算总价
    totalPrcie() {
      let totalPrcie = 0; // 总价
      this.choosedGoods.forEach(item => {
        totalPrcie += (item.goodsCount * item.price);
        this.priceTip = '￥' + totalPrcie.toFixed(2);
      })
    },
    // 计算微标数量
    calcSmallIcon() {
      let icon = 0;
      this.choosedGoods.forEach(item => {
        icon += item.goodsCount;
        this.miniIcon = icon;
      })
      if(this.choosedGoods.length == 0) {
        this.miniIcon = 0;
        this.priceTip = '未选购商品';
        this.payTip = '￥20起送';
      }  
    },
    // 清空购物车
    emptyChoosed() {
      // 清空购物车
      for(let i=0; i<this.choosedGoods.length; i++) {
        this.choosedGoods.splice(i, this.choosedGoods.length);
      }
      // 原商品数量清零
      this.newAllGoods.forEach(item => {
        item.foods.forEach(_item => {
          _item.goodsCount = 0;
        })
      })
      // 微标数量清零
      this.miniIcon = 0;
      // 价格还原默认提示
      this.priceTip = '未选购商品'
      // 起送提示
      this.payTip = '￥20起送';
    },
    // 获取同步改变源数据方法
    ...mapMutations(["initShopInfo", "initAllGoods", "updateGoodsCount"]),
  },
  computed: {
    // 获取state中的初始数据
    ...mapState(["shopInfo", "allGoods", "choosedGoods"]),
    ...mapGetters(["newAllGoods"]),
  },
  created() {
    // 获取商品数据
    getGoodsList_api().then((res) => {
      // 赋值 当前选项所有商品
      this.initAllGoods(res.goodsList);
      // 赋值 侧边导航内容
      this.menuList = res.goodsList.map((item) => item.name);
      // 滚动插件
      this.$nextTick(() => {
        this.menuScroll = new BScroll(".menu-list", {
          click: true,
        });
        this.goodsScroll = new BScroll(".right-info", {
          click: true,
          probeType: 3,
        });

        // 获取每个商品板块的滚动值
        this.goodsScroll.on("scroll", (pos) => {
          let scrollHeight = Math.abs(pos.y);
          this.heightArr.forEach((item, index) => {
            if (
              scrollHeight >= item.topHeight &&
              scrollHeight < item.btmHeight
            ) {
              this.activeKey = index;
              this.menuScroll.scrollToElement(`#menu_${index}`, 200);
            }
          });
        });
        // 获取单个面板的高度
        let initHeight = 0;
        this.heightArr = this.newAllGoods.map((item, index) => {
          let topHeight = initHeight;
          let btmHeight = document.querySelector(`#panel_${index}`).offsetHeight + initHeight;
          initHeight += document.querySelector(`#panel_${index}`).offsetHeight;
          return {
            topHeight,
            btmHeight,
            index,
          };
        });
        // console.log(this.heightArr);
      });
    });
    // 获取商家
    getSeller_api().then((res) => {
      this.initShopInfo(res.data);
      // console.log("商家信息", this.shopInfo);
    });
  },
};
</script>

<style lang="less" scoped>
.goods {
  .shop-bgc {
    height: 20vh;
    background: url("~@/assets/images/logo.png") no-repeat center center;
    background-size: 60%;
    filter: blur(4px);
  }
  .shop-wrap {
    width: 100%;
    height: 20vh;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .shop-info {
      display: flex;
      padding: 3vh;
      img {
        display: block;
        width: 66px;
        height: 66px;
        border-radius: 4px;
      }
      .text-info {
        padding-left: 3vh;
        .fis-title {
          font-size: 18px;
          span {
            font-size: 14px;
            display: inline-block;
            background: #e91f19;
            padding: 2px 4px;
            border-radius: 2px;
          }
        }
        .sec-title {
          font-size: 14px;
          margin: 2px 0;
        }
        .thr-title {
          display: flex;
          p {
            width: 18vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span {
              display: inline-block;
              background: #fff;
              padding: 1px 3px;
              color: #e91f19;
              font-weight: 600;
              border-radius: 2px;
            }
          }
        }
      }
    }
    .shop-notice {
      font-size: 12px;
      .van-notice-bar {
        height: 4vh;
      }
    }
    .block {
      padding: 100px 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      h3 {
        font-size: 16px;
      }
      .van-rate {
        margin: 20px 0;
      }
      .prefer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        p {
          width: 30vw;
          border-top: 1px solid;
        }
        h4 {
          margin: 0 15px;
          font-size: 14px;
        }
      }
      .activity {
        align-self: flex-start;
        p {
          line-height: 30px;
        }
      }
      .modal-notice {
        line-height: 28px;
      }
      .van-icon {
        margin-top: 60px;
      }
    }
  }
  .goods-wrap {
    height: calc(100vh - 20vh - 8vh);
    overflow: hidden;
    /deep/.van-tab {
      border-bottom: 1px solid #ccc;
    }
    .van-tabs {
      /deep/.van-tabs__line {
        background-color: transparent;
      }
      /deep/.van-tab--active {
        color: #ee0a24;
      }
    }
    .van-tab__pane {
      display: flex;
      .menu-list {
        width: 22vw;
        height: calc(72vh - 44px);
        overflow: hidden;
        .van-sidebar {
          /deep/.van-sidebar-item--select::before {
            background-color: #fff;
          }
          .van-sidebar-item {
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            max-height: 61px;
          }
          .van-sidebar-item:nth-child(3),
          .van-sidebar-item:nth-child(9) {
            padding: 10px 12px;
          }
        }
      }
      .right-info {
        flex: 1;
        width: 100%;
        height: calc(72vh - 44px);
        overflow: hidden;
        .goods-scroll {
          padding-bottom: 24px;
          .goods-panel {
            .goods-type {
              width: 100%;
              height: 30px;
              line-height: 30px;
              text-indent: 20px;
              color: #515f6b;
              background-color: #f2f6f9;
              border-left: 1px solid #ccc;
            }
            .goods-dsc {
              padding: 0 20px;
              box-sizing: border-box;
              position: relative;
              .single-icon {
                width: 18vw;
                position: absolute;
                right: 20px;
                bottom: 10px;
                display: flex;
                justify-content: space-between;
                /deep/.van-icon {
                  background-color: #01a0e0;
                  color: #fff;
                  padding: 2px;
                  border-radius: 10px;
                }
              }
              .single-goods {
                display: flex;
                padding: 20px 0;
                border-bottom: 1px solid #ccc;
                box-sizing: border-box;
                width: 100%;
                .goods-cover {
                  flex-basis: 80px;
                  margin-right: 10px;
                  img {
                    width: 100%;
                  }
                }
                .goods-detail {
                  width: 70%;
                  font-size: 12px;
                  color: #515f6b;
                  .goods-title {
                    color: #05070c;
                    font-size: 14px;
                    width: 160px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .goods-con {
                    width: 160px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 20px;
                  }
                  .sell-count {
                    line-height: 20px;
                  }
                  .goods-price {
                    font-size: 12px;
                    color: #af3a42;
                    font-weight: bolder;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 8vh;
    background-color: #131d27;
    position: relative;
    z-index: 2999;
    .foo-left {
      z-index: 2999;
      .out-circle {
        width: 8vh;
        height: 8vh;
        background-color: #131d27;
        border-radius: 50%;
        position: absolute;
        left: 2vh;
        bottom: 1vh;
        z-index: 2999;
        .in-circle {
          width: 6vh;
          height: 6vh;
          background-color: #2b333e;
          border-radius: 50%;
          position: absolute;
          left: 1vh;
          top: 1vh;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2999;
        }
        .van-badge {
          position: absolute;
          top: 3px;
          right: 4px;
          z-index: 3000;
        }
      }
      .tip {
        margin-left: 12vh;
        line-height: 8vh;
        color: #b5b9c4;
        font-size: 14px;
        z-index: 2999;
        position: relative;
      }
    }
    .foo-right {
      width: 30vw;
      height: 8vh;
      line-height: 8vh;
      position: absolute;
      right: 0;
      bottom: 0;
      text-align: center;
      color: #b5b9c4;
      font-size: 14px;
      background-color: #2b343b;
      z-index: 2999;
    }
  }
  .van-popup--bottom {
    bottom: 8vh;
    .cart-top {
      display: flex;
      justify-content: space-between;
      background-color: #edeef2;
      color: #5f6368;
      padding: 15px;
      box-sizing: border-box;
    }
    .add-goods {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 15px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      h3 {
        width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span {
        color: #ed4024;
        font-weight: bold;
      }
      /deep/.van-stepper--round .van-stepper__plus {
        background-color: #049edc;
      }
    }
  }
}
</style>